<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="ad-images" v-if="agent_conf.ad_images!=''">
			<image :src="agent_conf.ad_images" style="width:100%;" model="widthFix"></image>
		</view>
		
		<view class="content">		
			<view class="apply-d" v-if="agent_info.agent_audit_status">
				<view class="apply-bot-sop">
					<view class="abs-img">
						<u-icon name="checkmark-circle" color="#5ac725" size="60" v-if="agent_info.agent_audit_status==1"></u-icon>
						<u-icon name="close-circle" color="#f56c6c" size="60" v-if="agent_info.agent_audit_status==2"></u-icon>
						<u-icon name="clock" color="#909399" size="60" v-if="agent_info.agent_audit_status==3"></u-icon>
					</view>
				</view>
				<view class="apply-top fsz36 u-success" v-if="agent_info.agent_audit_status==1">
					恭喜，您的申请已通过！
				</view>
				<view class="fsz36 u-error" v-if="agent_info.agent_audit_status==2">
					抱歉，您的申请被驳回！
				</view>
				<view class="apply-top fsz36 u-info" v-if="agent_info.agent_audit_status==3">
					您的申请已提交，等待审批！
				</view>
			</view>
			
			<view class="apply-c" v-if="agent_info.agent_audit_status!=1 && agent_info.agent_audit_status!=3">
				<view class="apply-top">
					<view class='cell-group'>
						<view class='cell-item'>
							<view class='cell-item-hd'>
								<view class='cell-hd-title'>姓名</view>
							</view>
							<view class='cell-item-bd'>
								<input type="text" class='cell-bd-input' placeholder='请填您的姓名' v-model="name"></input>
							</view>
						</view>
						<view class='cell-item'>
							<view class='cell-item-hd'>
								<view class='cell-hd-title'>手机</view>
							</view>
							<view class='cell-item-bd'>
								<input type="number" class='cell-bd-input' placeholder='请填写您的手机号码' v-model="mobile"></input>
							</view>
						</view>
					</view>
					<view class="apply-tip color-6 fsz26">
						<agreement :title="agent_conf.agree_title" :content="agent_conf.agree_content" startText="我已经阅读并接受" @change="agreementChange"></agreement>
					</view>
				</view>
				
				<view class="apply-bot">
					<button class="btn btn-square btn-o btn-all" hover-class="btn-hover" @click="goApplyState()">申请成为分销</button>
				</view>
			</view>
		</view>
		
	</view>		
</template>

<script>
	import { mapState } from 'vuex'
	import $agent from '@/common/agent'
	import agreement from "./components/agreement.vue"
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		components:{
			agreement,
		},
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'申请分销',
				name: '',
				mobile: '',
				agent_conf:{},
				agent_info:{},
				is_agree:false
			}
		},
		onLoad(){
			this.initData()
		},
		computed:{
			...mapState({
				userInfo:state => state.$userInfo,
				config:state => state.$config,
				$s:state => state.$style,
			})
		},
		methods: {
			async initData(){
				this.name=this.userInfo.realname===null?'':this.userInfo.realname
				this.mobile=this.userInfo.mobile===null?'':this.userInfo.mobile
				
				//获取分销配置
				this.agent_conf = await $agent.getConf()
				
				this.agent_info = await $agent.agentInfo()
			},
			// 是否同意协议
			agreementChange(e){
				this.is_agree=e
			},
			// 信息验证
			checkData (data) {
				if (!data.realname) {
					this.$c.error('请输入您的姓名')
					return false
				} else if (!data.mobile) {
					this.$c.error('请输入您的手机号')
					return false
				} else if (data.mobile.length !== 11) {
					this.$c.error('手机号格式不正确')
					return false
				} else if (!this.is_agree) {
					//console.log(data)
					this.$c.error('请先勾选协议')
					return false
				} else {
					return true
				}
			},
			// 提交审核
			goApplyState() {
				let data = {
					realname: this.name,
					mobile: this.mobile,
				}
								
				if (this.checkData(data)) {
					this.$u.api.agentApply(data).then(res => {
						this.$c.success('申请成功！','index/user')
					});
				}
			},			
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/jshop.scss';
	.btn{
		color: var(--view-fontcolor);
		background-color: var(--view-theme);
	}
	.content{
		background-color: $u-bg_color;
		height: calc(100vh - 44px);
		padding-top: 50upx;
	}
	.apply-c{
		margin: 40upx auto;
		padding: 26upx 0;
		border-radius: 30upx;
		box-shadow: 0 0 10px #aaa;
		width: 670upx;
		min-height: 400upx;
		background-color: #fff;
	}
	.apply-top .cell-item{
		width: 610upx;
	}
	.apply-top .cell-item:last-child{
		border-bottom: 1px solid #f3f3f3;
	}
	.apply-top .cell-item .cell-item-hd{
		min-width: 120upx;
	}
	.apply-top .cell-item .cell-bd-input{
		width: 100%;
	}
	.apply-tip{
		padding: 26upx;
	}
	.apply-bot{
		width: 100%;
		text-align: center;
	}
	.apply-bot .btn{
		border-radius: 50upx;
		width: 90%;
		margin: 24upx auto 0;
	}
	.agreement{
		text-decoration: underline;
		color: #333333;
	}
	
	
	.apply-d{
		margin: 40upx auto;
		text-align: center;
		padding: 26upx;
		border-radius: 30upx;
		box-shadow: 0 0 10px #aaa;
		width: 670upx;
		min-height: 30upx;
		background-color: #fff;
	}
	.apply-top{
		margin: 40rpx auto 0rpx auto;
	}
	.apply-bot{
		width: 100%;
		text-align: center;
	}
	.apply-bot-sop{
		position: relative;
		height: 90upx;
		width: 65%;
		margin: 40upx auto 20upx;
		display: flex;
		line-height: 1.7555;
	}
	.apply-bot-sop>view{
		display: flex;
		justify-content: center;
	}
	.abs-img{
		flex: 1;
	}
	.abs-img image{
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}
	.abs-mid{
		flex: 2;
		display: flex;
	}
	.apply-bot-text{
		display: flex;
	}
	.abt-c{
		flex: 1;
	}
	.dot{
		width: 8upx;
		height: 8upx;
		margin: 0 4upx;
	}
	.color-p{
		color: var(--view-theme);
	}
	.cell-item{
		justify-content: flex-start;
	}
	.cell-item-hd{
		justify-content: center;
	}
</style>
